<!--
 * @Author: Bennty
 * @Date: 2024-11-08 14:46:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-11 11:15:18
 * @Description: 请填写简介
-->
<template>
    <div>
        <el-button type="primary" @click="generatePDF">生成pdf</el-button>
        <div id="pdf-content" v-show="!pdfUrl">
            <table class="order-table">
                <colgroup>
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                </colgroup>
                <caption>
                    <h2>生产工单</h2>
                </caption>
                <tr class="img-col">
                    <td colspan="6">
                        <img class="product-image" :src="detail?.renderingsUrl" alt="">
                    </td>
                </tr>
                <tr>
                    <td>生产单备注</td>
                    <td colspan="5" style="text-align: left">{{ detail?.produceOrderRemark }}</td>
                </tr>
                <tr>
                    <td>BOM备注</td>
                    <td colspan="5" style="text-align: left">{{ detail?.bomRemark }}</td>
                </tr>
                <tr>
                    <td>产品名称</td>
                    <td colspan="2">{{ detail?.bomId }}</td>
                    <td >制单日期</td>
                    <td colspan="2">{{ detail?.createTime }}</td>
                </tr>
                <tr>
                    <td>需求总数</td>
                    <td colspan="2">{{ detail?.produceNumber }}</td>
                    <td >交货日期</td>
                    <td colspan="2">{{ detail?.createTime }}</td>
                </tr>
                <tr>
                    <td>外箱名称</td>
                    <td colspan="2">{{ detail?.paperBoxName }}</td>
                    <td>箱规</td>
                    <td colspan="2">{{ detail?.boxGauge }}</td>
                </tr>
                <tr>
                    <td>生产单号</td>
                    <td colspan="5" class="img-col">
                        <img class="code-image" :src="detail?.renderingsUrl" alt="">
                    </td>
                </tr>
                <tr>
                    <td>包装方式</td>
                    <td colspan="2">{{ '热收缩包装' }}</td>
                    <td colspan="1">包装工费</td>
                    <td colspan="2">0.25</td>
                </tr>
                <tr>
                    <td>组装工费</td>
                    <td colspan="5">0.5</td>
                </tr>
                <tr>
                    <td colspan="4">部件名称</td>
                    <td colspan="1">单品数量</td>
                    <td colspan="1">需求总数</td>
                </tr>
                <tr v-if="detail?.semiList">
                    <td colspan="1" :rowspan="detail?.semiList.length + 1">半成品</td>
                </tr>
                <tr v-for="(item,index) in detail?.semiList" :key="index + 1">
                    <td colspan="3">{{ item.productName }}</td>
                    <td colspan="1">{{ item.proportionNumber }}</td>
                    <td colspan="1">{{ item.needTotal }}</td>
                </tr>
                <tr v-if="detail?.packingList">
                    <td colspan="1" :rowspan="detail?.packingList.length + 1">包装件</td>
                </tr>
                <tr v-for="(item,index) in detail?.packingList" :key="index + 1">
                    <td colspan="3">{{ item.productName }}</td>
                    <td colspan="1">{{ item.proportionNumber }}</td>
                    <td colspan="1">{{ item.needTotal }}</td>
                </tr>
                <tr v-if="detail?.auxiliaryList">
                    <td colspan="1" :rowspan="detail?.auxiliaryList.length + 1">通用部件(辅材)</td>
                </tr>
                <tr v-for="(item,index) in detail?.auxiliaryList" :key="index + 1">
                    <td colspan="3">{{ item.productName }}</td>
                    <td colspan="1">{{ item.proportionNumber }}</td>
                    <td >{{ item.needTotal }}</td>
                </tr>
                <tr>
                    <td colspan="6">包装人员信息</td>
                </tr>
                <tr>
                    <td>工号</td>
                    <td v-for="(item, index) in new Array(5)" :key="index + 1"></td>
                </tr>
                <tr>
                    <td>组装数量</td>
                    <td v-for="(item, index) in new Array(5)" :key="index + 1"></td>
                </tr>
                <tr>
                    <td>包装数量</td>
                    <td v-for="(item, index) in new Array(5)" :key="index + 1"></td>
                </tr>
                <tr>
                    <td>验收总数</td>
                    <td colspan="5"></td>
                </tr>
            </table>
        </div>
        <div v-if="pdfUrl" style="width:100%; height:600px;">
            <iframe :src="pdfUrl" style="width:100%; height:100%;" frameborder="0"></iframe>
        </div>
    </div>    
</template>

<script setup lang="ts">
import { getBOMProductOrderApi,getProductOrderDetailApi } from '@/api/sj/productManagement/BOMProductOrder';
// import './tableStyle.scss';
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";


const detail = ref<any>();
const pdfUrl = ref<string | null>(null);
const getDetail = async () => {
    const {data} = await getProductOrderDetailApi('1854441873717026818');
    detail.value = data;
};

const generatePDF = async () => {
    const element = document.getElementById("pdf-content");
    if (element) {
        // A4 页面宽度和高度（单位：毫米）
        const pdfWidth = 210;
        const pdfHeight = 297;
        const canvas = await html2canvas(element,{ useCORS: true, scale: 2 });
        const imgData = canvas.toDataURL("image/jpeg", 0.98);
        // 计算内容的实际比例
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageHeight = (contentHeight * pdfWidth) / contentWidth;
        let position = 0;
        const pdf = new jsPDF({
            orientation: "portrait",
            unit: "mm",
            format: "a4"
        });
        // 判断内容是否需要分页
        if (pageHeight < pdfHeight) {
            pdf.addImage(imgData, "JPEG", 0, 0, pdfWidth, pageHeight);
        } else {
            while (position < contentHeight) {
                pdf.addImage(imgData, "JPEG", 0, position, pdfWidth, pageHeight);
                position -= pdfHeight;
                if (position < contentHeight) {
                    pdf.addPage();
                };
            };
        };
        const pdfBlob = pdf.output("blob");
        pdfUrl.value = URL.createObjectURL(pdfBlob); 
        // pdf.save("document.pdf");
    };
};

console.log(detail.value)

onMounted(()=>{
    getDetail();
})
</script>

<style lang="scss" scoped>
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 60%;
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 300px;
    
        }
    }
    .code-image{
        height: 150px
    }
    
}
</style>